<template>
    <div class="form-making-height">
        <avue-form-design style="height: 100vh;"
                      :options="optionsJson"
                      @btnSave="btnSave"
                      storage
                      :custom-fields="customFields">
        </avue-form-design>
    </div>
</template>
<script>
    import {getAction, putAction} from '@/api/manage'
    import {Message} from 'element-ui'

    export default {
        name: 'FlowableFormEdit',
        data() {
            return {
                customFields: [
                 {
                    title: '分割线',
                    component: 'el-divider',//ele分割线
                    span: 24,
                    icon: 'el-icon-eleme',
                    tips: '看我：自定义属性怎么用？',
                    labelWidth: '0px',
                    params: {
                        html: '<h3 style="color:red">分割线标题</h3>',
                        contentPosition: "left",
                    }
                 },
                 {
                        title: '警告',
                        component: 'el-alert',
                        labelWidth: '0px',
                        span: 24,
                        icon: 'el-icon-warning',
                        tips: '看我：自定义事件怎么用？',
                        params: {
                            title: '警告警告警告警告',
                            type: 'success'
                        },
                        event: {
                            close: () => {
                            console.log('alert关闭事件')
                            }
                        }
                    },{
                        title: '页面标题',
                        component: 'form-user-header',
                        labelWidth: '0px',
                        span: 24,
                        icon: 'el-icon-eleme',
                        tips: '用于表示流程名使用',
                        params: {
                            title: '页面标题',
                            type: 'success'
                        },
                        event: {
                            close: () => {
                            console.log('alert关闭事件')
                            }
                        }
                    },{
                        title: '选人组件',
                        component: 'form-user-select',
                        labelWidth: '0px',
                        span: 12,
                        icon: 'el-icon-eleme',
                        tips: '用于表示流程名使用',
                        params: {
                            title: '选人组件',
                            type: 'success'
                        },
                        objmap: [{key:'name',mapKey:'realName'},{key:'id',mapKey:'account'}],
                        event: {
                            close: () => {
                            console.log('alert关闭事件')
                            }
                        }
                    }
                ],// <form-user-header />
                options: { column: [] },
                formKey: undefined,
                formData: {
                    formKey: undefined,
                    formName: '',
                    formJson: ''
                },
                defaultJson: {column: []},
                optionsJson:{}
            }
        },
        created() {
            if (this.$route.query && this.$route.query.formKey) {
                this.formKey = this.$route.query.formKey
            }
            this.getFormData()
        },
        methods: {
            getFormData() {
                if (!this.formKey) {
                    Message.error('formKey is null')
                    return
                }
                getAction('/api/sdt-flow/flowable/form/queryById', {id: this.formKey}).then((res) => {
                    this.formData = res.data.data
                    debugger
                    if (this.formData && this.formData.formJson) {
                        this.optionsJson = JSON.parse(this.formData.formJson)
                        //setTimeout(() => this.$refs.makingFrom.setJSON(JSON.parse(this.formData.formJson)), 100)
                    } else {
                        this.optionsJson = this.defaultJson
                        //setTimeout(() => this.$refs.makingFrom.setJSON(this.defaultJson), 100)
                    }
                })
            },
            btnSave(data) {
                this.formData.formJson = JSON.stringify(data)
                debugger
                putAction('/api/sdt-flow/flowable/form/update', this.formData).then((res) => {
                    Message.success(res.data.msg)
                })
            },
            handleSubmit(val) {
                this.$message.success("查看控制台")
                console.log(val);
            },
        }
    }
</script>

<style lang="scss">
    .form-making-height {
        height: calc(100vh - 84px);
    }
</style>